<template>
  <div v-if="show">
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称" width="200px" align="left">
        <template #default="scope">
          <div>
            {{ scope.row.name }}
            <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="right">
              <template #default>
                <el-icon class="ml-1"><Warning /></el-icon>
              </template>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="值">
        <template #default="scope">
          <el-tag>{{ scope.row.value }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template #default="scope">
          <div>
            <el-button type="primary" @click="onClickClipboard(scope.row.value, $event)">复制</el-button>
            <template v-if="scope.$index > 0">
              <el-button type="warning" @click="onClickCreate(scope.$index)">生成</el-button>
              <el-button type="danger" @click="onClickEdit(scope.$index)">修改</el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'
import { getPlaid } from '@/utils/auth'
import { editWechatMessage, getWechatMessage } from '@/api/platform/wechat'
import clipboard from '@/utils/clipboard'

defineOptions({
  name: 'WechatMessageCard'
})

const plaid = getPlaid()
const messageData = ref({})
const show = ref(false)

const tableData = computed(() => [
  {
    title: '服务器地址',
    name: 'URL',
    value: messageData.value.api_url
  },
  {
    title: '令牌',
    name: 'Token',
    field: 'token',
    value: messageData.value.token
  },
  {
    title: '消息加解密密钥',
    name: 'EncodingAESKey',
    field: 'encodingaeskey',
    value: messageData.value.encodingaeskey
  }
])

const onClickClipboard = (text, event) => {
  clipboard(text, event)
}

const onClickEdit = (index) => {
  ElMessageBox.prompt('请输入' + tableData.value[index].title, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(({ value }) => {
      messageData.value[tableData.value[index].field] = value
      editWechatMessage(plaid, messageData.value).then((res) => {
        ElMessage.success(res.msg)
      })
    })
    .catch(() => {})
}

const onClickCreate = (index) => {
  ElMessageBox.confirm('是否要生成新的' + tableData.value[index].title, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      let len = 32
      if (index === 2) {
        len = 43
      }
      messageData.value[tableData.value[index].field] = randomString(len)
      editWechatMessage(plaid, messageData.value).then((res) => {
        ElMessage.success(res.msg)
      })
    })
    .catch(() => {})
}

const randomString = (len) => {
  len = len || 32
  const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  const maxPos = $chars.length
  let pwd = ''
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}

onMounted(() => {
  getWechatMessage(plaid)
    .then((res) => {
      messageData.value = res.data
      show.value = true
    })
    .catch(() => {})
})
</script>

<style scoped lang="scss"></style>
